import { BrowserRouter, Route, Link, Routes, Redirect} from "react-router-dom";
import React, {Component} from "react";
import './App.css';
import DocumentTitle from 'react-document-title'
import BackButton from "./components/BackButton";
import Home from "./pages/Home";
import Range from "./pages/Range";
import RangeModels from "./pages/RangeModels";
import Model from "./pages/Model"
import Bag from "./pages/Bag"
import Registration from "./pages/Registration"
import Auth from "./pages/Auth"
import Logout from "./pages/Logout"
import AddForm from "./components/AddForm";
import { lazy, Suspense } from 'react';
import ManagerBags from "./components/ManagerBags";
import ManagerClients from "./components/ManagerClients";
import ManagerClient from "./components/ManagerClient";
import NavBar from "./components/NavBar";
import EditForm from "./components/EditForm";
import ManagerRange from "./components/ManagerRange";
import HomeNew from "./pages/NEW";
// const LoginPage = lazy(() => import('./Auth'));
// const Register = lazy(() => import('./Registration'));

function App() {
  return (
      <DocumentTitle title = 'Shop100'>
        <BrowserRouter basename="/" >
          <div>
            <NavBar/>
            <Routes>
              <Route exact path="/" element={<Home/>} />

              <Route exact path="/range"
              element={
                <>
                  <Range/>
                  <BackButton/>
                </>
              }/>

              <Route exact path={`/range/:rangeId/models`}
                element={
                  <>
                    <RangeModels/>
                    <BackButton/>
                  </>
                }
              />

              <Route exact path={'/range/:rangeId/models/:modelId'}
                element={
                  <>
                    <Model/>
                    <BackButton/>
                  </>
                }
              />

              <Route exact path={'/bag'}
                ele={
                  <>
                    <Bag/>
                    <BackButton/>
                  </>
                }
              />

              <Route exact path={'/reg'}
                ele={
                  <>
                    <Registration/>
                    <BackButton/>
                  </>
                }
              />

              <Route exact path={'/auth'}
                element={<Auth/>}
              />


              <Route exact path={'/logout'}
                element={<Logout/>}
              />

              <Route exact path={'/manager/add'}
                element={<AddForm/>}
              />

              <Route exact path={'/manager/edit'}
                element={<EditForm/>}
              />


              <Route exact path={'/manager/range/:rangeId'}
                element={<ManagerRange/>}
              />

              <Route exact path={'/manager/clients'}
                element={<ManagerClients/>}
              />

              <Route exact path={'/manager/clients/:clientId'}
                element={<ManagerClient/>}
              />

              <Route exact path={'/new'}
                element={<HomeNew/>}
              />
            </Routes>
          </div>
        </BrowserRouter>

      </DocumentTitle>
  );
}



export default App;